import { createFileRoute } from "@tanstack/react-router";
import { columns, type Payment } from "@/components/organization/columns";
import { DataTable } from "@/components/organization/data-table";
import { OrgsItemDeleteAlert } from "@/components/organization/orgs-item-delete-alert";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export const Route = createFileRoute("/_app/organizations_/$id")({
	component: RouteComponent,
});

function getData(): Payment[] {
	// Fetch data from your API here.
	return [
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
		{
			id: "728ed52f",
			amount: 100,
			status: "pending",
			email: "m@example.com",
		},
	];
}

function RouteComponent() {
	const data = getData();
	return (
		<div className="flex flex-col gap-8 p-6 h-full w-full">
			<Tabs defaultValue="general" className="h-full w-full gap-4">
				<TabsList className="h-auto">
					<TabsTrigger value="general">General</TabsTrigger>
					<TabsTrigger value="members">Members</TabsTrigger>
				</TabsList>
				<TabsContent
					value="general"
					className="flex flex-col gap-8 w-full h-full pt-4"
				>
					<div className="flex flex-col gap-3 max-w-2xl rounded-lg">
						<Label htmlFor="name">Organization Name</Label>
						<div className="flex items-center gap-4 w-full">
							<Input
								id="name"
								defaultValue="Pedro Duarte"
								className="border-border h-8"
							/>
							<Button size={"sm"}>Rename</Button>
						</div>
					</div>
					<div className="rounded-lg flex max-w-2xl justify-between items-end gap-4 p-4 border border-border bg-card">
						<div className="flex flex-col gap-2">
							<p className="text-lg">Delete this repository</p>
							<p className="text-xs text-muted-foreground">
								Permanently delete your organization and all data.
							</p>
						</div>
						<div className="flex items-center justify-end gap-4">
							<OrgsItemDeleteAlert />
						</div>
					</div>
				</TabsContent>
				<TabsContent value="members">
					<div className="h-full w-full">
						<DataTable columns={columns} data={data} />
					</div>
				</TabsContent>
			</Tabs>
		</div>
	);
}
